
<template>
  <el-dialog   v-model="dialog.visible"   :title="dialog.title"   :width="dialog.width"   :close-on-click-modal="false"
               :append-to-body="true"   :style="style"
               @close="close">
    <!--    这里是插槽，可以自定义内容    -->
    <slot   name="default"></slot>
    <!--    底部插槽，可以自定义，默认显示两个按钮    -->
    <template   #footer   v-if="!dialog.noFooter">
      <slot   name="footer">
        <el-button   @click="close"   type="warning"   :style="style"   size="small">取消</el-button>
        <el-button   @click="confirm"   color="#1D93AB"   :style="style"   size="small">确定</el-button>
      </slot>
    </template>
  </el-dialog>

  <el-button @click="openDialog" type="primary">打开Dialog</el-button>
  <v-dialog v-model="dialog.visible" title="标题" width="50%" @close="dialog.visible = false">
    <div>内容</div>
  </v-dialog>
  <VDialog   v-model="vdialog.visible"   :title="dialog.title"   :width="dialog.width"   :close-on-click-modal="false"/>
</template>
<script   setup>
import   {onMounted, ref, reactive,watch}   from"vue";
import VDialog from "./VDialog.vue";

// 定义属性
const   props = defineProps({
// 这里使用 modelValue ，这样就可以在父组件直接使用 v-model 双向绑定
// 如果不写 modelValue ，那么父组件中，就必须使用 v-model:属性名称 绑定数据
modelValue: {
          type:   Boolean,
          default:   false
    },
title: {
          type:   String,
          default:   '提示'
    },
width: {
          type:   String,
          default:   '40%'
    },
noFooter: {
          type:   Boolean,
          default:   false
    }
});
// 定义事件，这里一定要有 update:modelValue 事件，用于通知父组件更新 v-model 的数据
const   emits = defineEmits(['update:modelValue',   'close',   'confirm']);

// 定义变量
const   dialog = ref({
visible: props.modelValue,
title: props.title,
width: props.width,
noFooter: props.noFooter
});
const   style = ref({
borderRadius:   '0'
});

// 初始化方法
onMounted(()   =>   {
    initialValue();
});
// 监听属性变化
watch(()   =>   props.modelValue, (newVal) => {
    initialValue(newVal);
console.log('dialog.value===>', dialog.value);
}, {deep:   true});
// 初始化变量值
const   initialValue =   (visible) =>   {
    dialog.value.visible = visible || props.modelValue;
    dialog.value.title = props.title;
    dialog.value.width = props.width;
    dialog.value.noFooter = props.noFooter;
};
// 关闭事件
const   close =   ()   =>   {
    dialog.value.visible =   false;
// 关闭弹出框的时候，需要通知父组件更新 v-model 绑定的数据
    emits('update:modelValue',   false);
    emits('close',   false);
};
// 确定事件
const   confirm =   ()   =>   {
    dialog.value.visible =   false;
// 关闭弹出框的时候，需要通知父组件更新 v-model 绑定的数据
    emits('confirm');
};


const vdialog = reactive({
  visible: false
});
const openDialog = () => {
  dialog.visible = true;
};

</script>


<style   scoped>
</style>